<template>
    <div class="LeftMenu">
        <div :style="{'backgroundColor': backgroundMenuColor}" style="margin-right: 1px;">
            <div  style="display: flex;padding: 20px;" class="menu-border">
                <img :src="user.imageUrl" style="width: 50px;height: 50px;border-radius: 50%;object-fit: cover" class="rotating-element"/>
                <div style="display: flex;flex-direction: column;align-self: center;margin-left: 20px">
                    <span :style="{'color': activeTextColor}" style="align-self: center;margin-left: 5px">{{user.nickName}}</span>
                    <el-tag style="font-size: 12px;margin-top: 5px;text-align: center" size="mini">{{ user.roleRemark }}</el-tag>
                </div>
            </div>
        </div>

        <el-menu
            :background-color="backgroundMenuColor"
            :text-color="textMenuColor"
            :active-text-color="activeTextColor" router>
            <div v-for="(menu,index) in allMenus" :key="index">
                <el-menu-item :index="menu.path" v-if="menu.path" class="menu-border">
                    <i class="my-menu-icon" :class="menu.meta.icon"></i>
                    <span slot="title">{{ menu.meta.menuName }}</span>
                </el-menu-item>
                <MenuItem v-else :menu="menu" :index="index"></MenuItem>
            </div>
        </el-menu>
    </div>
</template>
<script>
import MenuItem from "@/components/MenuItem.vue"
export default {
    data() {
        return {
            allMenus: [],
            activeTextColor: "#ffd04b",
            user: JSON.parse(localStorage.getItem("user"))
        }
    },
    components: {MenuItem},
    mounted() {
        this.allMenus = JSON.parse(localStorage.getItem("menus"))?.children?.filter(x => x.meta.isShowMenu)
        const root = document.documentElement
        this.activeTextColor = getComputedStyle(root).getPropertyValue('--menu-active-text-color')
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating-element {
    animation: rotate 8s linear infinite;
}
.LeftMenu {
    height: 100vh;

    .el-menu {
        height: 100vh;
    }
}
</style>